<template>
  <div class="Login">
    <el-form>
      <el-form-item label="账号">
        <el-input v-model="form.account"></el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item @keyup.enter.native="login" label="验证码">
        <div>
          <el-input v-model="form.code">
            <el-image ref="flashCode" @click="reflashCode" slot="prepend" style="height: 100%;width: 7em;  margin: 0;"
                      :src="login_code_url" lazy/>
            <!--  <el-button  icon="el-icon-search"></el-button>-->
          </el-input>

        </div>
      </el-form-item>

      <el-form>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="warning" @click="$router.push({path:'/register'})">注册</el-button>
      </el-form>
    </el-form>

  </div>
</template>

<script>
import user from "@/api/user";
import service from "@/api";

export default {
  name: "UserList",
  data() {
    return {
      items: [],
      query: {},
      imgUrl: service.baseURL,
      login_code_url: service.baseURL + '/verifyCode/code',

      form: {
        "account": "",
        "code": "",
        "password": ""
      }

    }
  },
  created() {
  },
  methods: {

    login() {
      user.login(this.form).then(res => {
        console.log(res)
        if (res.code === 200) {
          let user = res.data
          this.$message.success(res.msg)
          this.$store.dispatch("setUserInfoAsync", user)
          this.$router.push({path: '/'})
          return
        }

        this.$message.error(res.msg)

      })
    },


    reflashCode() {
      // this.$refs.reflashCode.style.display = "none"
      this.login_code_url = "";
      var t = (new Date()).getTime();
      this.login_code_url = service.baseURL + '/verifyCode/code?t=' + t
      // this.$refs.flashCode.src = this.login_code_url;
    },
    banUser(row) {

    },
  }
}
</script>

<style lang="scss" scoped>

.Login {
  width: 95%;
  margin: 0 auto;
}

::v-deep .el-input-group__prepend {
  padding: 0;
  margin: 0;
}
</style>
